<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .loading{
            width: 40px;
            height: 40px;

            margin: 30px auto;
            position: relative;
        }
        .loading .box1, .loading .box2 {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .loading .box2{
            transform: rotate(45deg);
        }


        .loading .box1 div, .loading .box2 div{
            width: 10px;
            height: 10px;
            background: blue;
            border-radius: 50%;
            position: absolute;
            animation: loadingmove 1.5s infinite linear;
        }
        .loading .box1 div:nth-child(1), .loading .box2 div:nth-child(1){
            left: 0;
            top: 0;
        }
        .loading .box1 div:nth-child(2), .loading .box2 div:nth-child(2){
            right: 0;
            top: 0;
        }
        .loading .box1 div:nth-child(3), .loading .box2 div:nth-child(3){
            right: 0;
            bottom: 0;
        }
        .loading .box1 div:nth-child(4), .loading .box2 div:nth-child(4){
            left: 0;
            bottom: 0;
        }
        @keyframes loadingmove {
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(0);
            }
            100%{
                transform: scale(1);
            }
            
        }
        .loading .box1 div:nth-child(1){animation-delay: -0s;}
        .loading .box2 div:nth-child(1){animation-delay: -.2s;}
        .loading .box1 div:nth-child(2){animation-delay: -.4s;}
        .loading .box2 div:nth-child(2){animation-delay: -.6s;}
        .loading .box1 div:nth-child(3){animation-delay: -.8s;}
        .loading .box2 div:nth-child(3){animation-delay: -1s;}
        .loading .box1 div:nth-child(4){animation-delay: -1.2s;}
        .loading .box2 div:nth-child(4){animation-delay: -1.4s;}


    </style>
</head>
<body>
<div class="loading">
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

</body>
</html>